<template>
  <div class="SubFilter">
      <!-- 二级分类下的过滤商品 -->
    <div class="sub_filter" v-for="item in brands" :key="item.id">
      <div class="sub_name">品牌：</div>
      <div class="sub_desc">
        <div
          :class="{
            sub_all: true,
            blacks: true,
            active: active[0] == '全部',
          }"
          @click="subHandle('全部', 0)"
        >
          全部
        </div>
        <div
          class="blacks sub_val"
          :class="active[0] == item.name ? 'active' : ''"
          @click="subHandle(item.name, 0)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div
      class="sub_filter"
      v-for="(item, index) in saleProperties"
      :key="item.id"
    >
      <div class="sub_name">{{ item.name }}：</div>
      <div class="sub_desc">
        <div
          @click="subHandle('全部', index + 1)"
          :class="{
            sub_all: true,
            blacks: true,
            active: active[index + 1] == '全部',
          }"
        >
          全部
        </div>
        <div
          class="sub_val blacks"
          v-for="items in item.properties"
          :key="items.id"
          @click="subHandle(items.name, index + 1)"
          :class="active[index + 1] == items.name ? 'active' : ''"
        >
          {{ items.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  computed,
  nextTick,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    brands: {
      type: Array,
      default: [],
    },
    saleProperties: {
      type: Array,
      default: [],
    },
  },
  name: "SubFilter",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    onMounted(() => {
      data.time = setTimeout(() => {
        for (let i = 0; i <= props.saleProperties.length; i++) {
          data.active.push("全部");
        }
      }, 220);
    });
    onBeforeUnmount(() => {
      clearTimeout(data.time);
      data.time = null;
    });
    const data = reactive({
      time: null,
      active: [],
      subHandle: (name, index) => {
        data.active[index] = name;
      },
    });
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.SubFilter {
  margin-top: 20px;
  width: 100%;
  padding: 20px 30px;
  margin-bottom: 20px;
  background-color: #fff;
  .sub_filter {
    display: flex;
    line-height: 50px;
    font-size: 14px;
    .sub_name {
      width: 80px;
      color: #000;
    }
    .sub_desc {
      flex: 1;
      overflow: hidden;
      .active {
        color: var(--color);
      }
      .actives {
        color: var(--color);
      }
      .sub_all,
      .sub_val {
        cursor: pointer;
        float: left;
        margin-right: 20px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 1;
        max-width: 112px;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>